Development Guide

Documentation - v1.0

Autozen - Car Detailing Service & Car Repair HTML Bootstrap 5 Template

The Autozen is a Static HTML5 Template:
We do not offer any documentation or email assistance for integrating with CMS platforms (e.g., WordPress, Joomla, etc.).

Get Help

Thank you for purchasing our item(s). If you have any questions beyond the scope of this help file, please contact us via the support page here. Thank you so much!

In certain cases, it may take up to 5 working days to receive a reply by email. We will, however, do our best to respond as quickly as possible. Delays may occur due to high email volume and time zone differences.

Files Structure

Open the main file (Autozen) in your code editor. Then open index.html file & customize it as desired.

File location: Autozen > html_template > index.html

Code Editor

There are many code editors available for web development, and you may use any you prefer. However, we recommend Visual Studio Code . Because - this template is coded using it.

How to edit the Title & Favicon?

Open the main file (Autozen) in your code editor. Then open index.html file & customize it as desired.

File location: Autozen > html_template > index.html

Remember: The page you will edit, the change will be only that page. So, you need to edit all the HTML files.

How to edit the Brand Logo?

Open the main file (Autozen) in your code editor. Then open index.html file & customize it as desired.

File location: Autozen > html_template > index.html

Remember: The page you will edit, the change will be only that page. So, you need to edit all the HTML files.

How to edit the Footer Nav?

Open the main file (Autozen) in your code editor. Then open index.html file & customize it as desired.

File location: Autozen > html_template > index.html

Remember: The page you will edit, the change will be only that page. So, you need to edit all the HTML files.

How to edit the template Colors?

Open the main file (Autozen) in your code editor. Then open style.css file & customize it as desired.

File location: Autozen > css > style.css

Third Party Plugins Activation

Name Plugins Activation Code
Animation On Scroll (AOS)
$(document).ready(function () {
  // Initialize AOS (Animate On Scroll)
  AOS.init({
    duration: 800,
    once: true
  });
});
Fancybox JS Lightbox
$(document).ready(function () {
 // Fancy Box
  Fancybox.bind("[data-fancybox]", {
    Carousel: {
      Video: {
        autoplay: false,
      },
    },
  });
Slick Slider
$(document).ready(function () {
   // Testimonial
  $('.testimonial-slide').slick({
    slidesToShow: 3,
    slidesToScroll: 3,
    autoplay: true,
    dots: true,
    arrows: false,
    autoplaySpeed: 2000,
    responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
      }
    }, {
      breakpoint: 520,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      }
    }]
  });

Changelog(s)

Version 1.0.0
  • Initial Release